<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" :append-to-body="true" title="订单详情" width="50%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
    <div class="flex">
      <p class="title marginR20">订单号：<span>{{ data.order_num }}</span></p>
      <el-tag :type="orderType(data.order_status)" >{{ orderStatus(data.order_status) }}</el-tag>
    </div>
    <div class="flexStartDetween">
      <div class="infoBox width45">
        <p>订单信息</p>
        <div class="info flex" v-for="(item,index) in userData" :key="index">
          <div class="width50">{{ item.label }}</div>
          <div v-if="item.key!='order_alert_status'" class="leftBorder width50">{{ item.value }}</div>
          <div v-else class="leftBorder width50" style="line-height: 30px"><el-button  class="order_state" size="mini" :type="orderState(item.value)" circle>{{''}}</el-button> </div>
        </div>
      </div>
      <div class="infoBox width45">
        <p>提款信息</p>
        <div class="info flex" v-for="(item,index) in goldData" :key="index">
          <div class="width50">{{ item.label }}</div>
          <div class="leftBorder width50">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  ORDER_STATE,
  ORDER_STATUS
} from '@/utils/enum'
export default {
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      ORDER_STATE,
      ORDER_STATUS,
      isShow: false,
      userData:[
        {label:'用户ID',key:'user_id',value:''},
        {label:'真实姓名',key:'user_name',value:''},
        {label:'提款金额',key:'cash_money',value:''},
        {label:'手续费',key:'cash_fee',value:''},
        {label:'预计出款金额',key:'cash_sure_money',value:''},
        {label:'出款警示状况',key:'order_alert_status',value:''},
        // {label:'警示内容',key:'mobile',value:''},
      ],
      goldData:[
        {label:'绑定银行',key:'bank_name',value:''},
        {label:'银行卡号',key:'bank_card_number',value:''},
        {label:'今日充值',key:'user_today_recharge',value:''},
        {label:'今日下注',key:'user_today_game_bet',value:''},
        {label:'今日输赢',key:'user_today_game_income',value:''},
        {label:'今日已提现金额',key:'user_today_cash',value:''},
      ],
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        for (const key in that.data) {
          // 用户信息
          that.userData.map(item=>{
            if(key==item.key){
              item.value=that.data[key]
            }
          })
          // 银行卡信息
          that.goldData.map(item=>{
            if(key==item.key){
              if( key!='bank_name' &&  key!='bank_card_number'){
                that.data[key]=that.$public.mathNumberDivideWan(that.data[key])
              }
              item.value=that.data[key]
            }
          })
        }
      } else {
        this.userData=[
          {label:'用户ID',key:'user_id',value:''},
          {label:'真实姓名',key:'user_name',value:''},
          {label:'提款金额',key:'cash_money',value:''},
          {label:'手续费',key:'cash_fee',value:''},
          {label:'预计出款金额',key:'cash_sure_money',value:''},
          {label:'出款警示状况',key:'order_alert_status',value:''},
          // {label:'警示内容',key:'mobile',value:''},
        ],
        this.goldData=[
          {label:'绑定银行',key:'bank_name',value:''},
          {label:'银行卡号',key:'bank_card_number',value:''},
          {label:'今日充值',key:'user_today_recharge',value:''},
          {label:'今日下注',key:'user_today_game_bet',value:''},
          {label:'今日输赢',key:'user_today_game_income',value:''},
          {label:'今日已提现金额',key:'user_today_cash',value:''},
        ]
      }
    },
  },
  mounted () {},
  methods: {
    // 订单展示
    orderStatus(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.label || "-");
    },
    // 订单状态
    orderType(cellValue){
      return (this.ORDER_STATUS.find((item) => item.value === cellValue)?.type || "-");
    },
    // 订单警戒状态
    orderState(cellValue){
      return (this.ORDER_STATE.find((item) => item.value === cellValue)?.label || "-");
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.width45{
  margin: 5px;
  border: 1px solid #999999;
}
.infoBox{
  color: #333;
  font-size: 15px;
  text-align: center;
  p{
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  .info{
    border-top:1px solid #999999;
    div{
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
    }
    .leftBorder{
      color: #000;
      border-left:1px solid #999999;
      font-weight: 550;
    }
  }
}
.order_state {
  width: 27px;
  height: 27px;
}
.title{
  font-size: 18px;
  span{
    color: red;
  }
}
</style>